<template>
  <div>
    <!-- 头部组件 -->
    <Nav>
      <button @click="fan">返回</button>
      <h2>我的书架</h2>
    </Nav>
    <van-collapse v-model="activeNames">
      <!-- 正在看-->
      <van-collapse-item title="正在看" name="1">
          <div class="box" v-for="(item,index) in  $store.state.list1" :key="index" v-show="item.state==0">
              <div>{{item.name}}</div>
              <div @click="change(index)">标记为已看完</div>
              <div>|</div>
              <div @click="del(index)">删除图书</div>
          </div>
      </van-collapse-item>
      <!-- 已完结 -->
      <van-collapse-item title="已完结" name="2">
            <div class="box" v-for="(item,index) in  $store.state.list1" :key="index" v-show="item.state==1">
              <div>{{item.name}}</div>
              <div @click="cancel(index)">再看一遍</div>
              <div>|</div>
              <div @click="del(index)">删除图书</div>
          </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import Nav from "../components/nav";
export default {
  components: { Nav },
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted() {},
  methods: {
    fan() {
      this.$router.push({ path: "/about" });
    },
    // 标记为已看完
     change(index) {
      this.$store.commit("CHANGE", index);
    },
    // 再看一遍
        cancel(index) {
      this.$store.commit("CANCEL", index);
    },
    // 删除
    del(index){
      this.$store.commit("DEL",index)
    }
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
h2 {
  color: #fff;
}
button {
  width: 40px;
  height: 26px;
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
</style>
